<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Spring Boot+WebSocket+广播式</title>
</head>
<body onload="disconnect()">
<noscript>
<h2 style="color:#ff0000">貌似你的浏览器不支持websocket</h2>
</noscript>
<div>
	<div>
		<button id="connect" onclick="connect();">连接</button>
		<button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
	</div>
	<div id="conversationDiv">
		<label>输入你的名字</label><input type="text" id="name"/>
		<button id="sendName" onclick="sendName();">发送</button>
		<p id="response"></p>
	</div>
</div>

<script type="text/javascript" th:src="@{sockjs.js}"></script>
<script type="text/javascript" th:src="@{stomp.min.js}"></script>
<script type="text/javascript" th:src="@{jquery.min.js}"></script>
<script type="text/javascript">
	var stompClient =null;
	function setConnect(connected){
		$('#connect').attr('disabled',connected);
		$('#disconnect').attr('disabled',!connected);
		$('#conversationDiv').css('visibility',connected ? 'visible':'hidden');
		$("#response").html();
	}
	
	function  connect(){
		var socket =new SockJS('/endpointJohn');
		stompClient=Stomp.over(socket);
		stompClient.connect({},function(frame){
			setConnect(true);
			console.log('Connected: '+frame);
			stompClient.subscribe('/topic/getResponse',function(response){
				showResponse(JSON.parse(response.body).responseMessage);
			});
		});
	}
	
	function disconnect(){
		if(stompClient !=null){
			stompClient.disconnect();
		}
		setConnect(false);
		console.log("Disconnected");
	}
	
	function sendName(){
		var name=$('#name').val();
		stompClient.send("/welcome",{},JSON.stringify({'name':name}));
	}
	
	function showResponse(message){
		var response =$("#response");
		response.html(message);
	}

</script>
</body>
</html>